<template>
	<view>
		<text-input 
			v-model='newTodoText'
			placeholder='new todo'
			@add="onAdd"
		/>
		<view v-if="todos.length" class="todo-list">
			<todo-item
				v-for="todo in todos"
				:key="todo.id"
				:todo="todo"
				@remove="$emit('remove',todo.id)"
			/>
		</view>
	</view>
</template>

<script>
	import textInput from '@/components/text-input.vue';
	import todoItem from '@/components/todo-item.vue';
	export default {
		components:{
			textInput,todoItem
		},
		
		data() {
			return {
				newTodoText:''
			};
		},
		props:{
			todos:{
				type:Array,
				default:[]
			}
		},
		methods:{
			onAdd(){
				console.log(this.newTodoText);
				this.$emit('add',this.newTodoText);
				this.newTodoText = '';
			}
		}
	}
</script>

<style>
.todo-list{
	padding: 20upx;
}
</style>
